<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<center>
<h1>这里是员工的列表</h1>
    <a href="add.html">新增</a>
    <table width="800px" id="mytab"  style="text-align: center;" border="1">
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>密码</td>
            <td>年龄</td>
            <td>电话</td>
            <td>状态</td>
            <td>操作</td>
        </tr>

        <tr>
            <td>1</td>
            <td>张三</td>
            <td>123</td>
            <td>15</td>
            <td>119</td>
            <td>启用</td>
            <td>
                <a href="#">修改</a><a href="#">删除</a>
            </td>
        </tr>


    </table>

</center>
</body>
</html>
<!--在此页面发送请求到服务器查询全部数据-->
<script src="js/axios-0.18.0.js"></script>
<script>
    window.onload=function () {
        axios.get("http://localhost:8080/javaweb15/employee/findAll").then(function (resp) {
             console.log(resp.data);
            //获取了数据如何显示在页面上呢？
            //思路：将查询处理的数据遍历到tr中然后将tr放到table里
           let employees = resp.data;//数据数组
            //js不能只遍历其中的某部分html标签
            let tableTag = " <tr>\n" +
                "            <td>编号</td>\n" +
                "            <td>姓名</td>\n" +
                "            <td>密码</td>\n" +
                "            <td>年龄</td>\n" +
                "            <td>电话</td>\n" +
                "            <td>状态</td>\n" +
                "            <td>操作</td>\n" +
                "        </tr>";

            //将查询后的数据拼接到表格数据中
            for(let i =0;i < employees.length;i++){
                //每次循环取出循环对象
                let emp = employees[i];

                //将循环出来的标签拼接到字符串中
                tableTag+=" <tr>\n" +
                    "            <td>"+emp.id+"</td>\n" +
                    "            <td>"+emp.userName+"</td>\n" +
                    "            <td>"+emp.passWord+"</td>\n" +
                    "            <td>"+emp.age+"</td>\n" +
                    "            <td>"+emp.phone+"</td>\n" +
                    "            <td>"+emp.status+"</td>\n" +
                    "            <td>\n" +
                    "                <a href=\"#\">修改</a><a href=\"#\">删除</a>\n" +
                    "            </td>\n" +
                    "        </tr>";
            }


            //将我们拼接好的数据放到table中
            document.getElementById("mytab").innerHTML=tableTag;

            //以上方案遍历数据极其麻烦  后面学习Vue即可轻松解决
            //作业尝试新增
        });
    }

    
    
</script>